<#include '../header.ftl'>
<#include '../showresult/header.ftl'>
<script src="/js/text_overflow.js"></script>
<style>
    /*------公共样式开始------*/
    .fa-angle-right:focus {
        -ms-transform: rotate(45deg);
        /* IE 9 */
        -moz-transform: rotate(45deg);
        /* Firefox */
        -webkit-transform: rotate(45deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(45deg);
        /* Opera */
        transform: rotate(45deg);
        -webkit-transition: -webkit-transform 0.2s ease-in;
        /* Safari 和 Chrome */
        -moz-transition: -moz-transform 0.2s ease-in;
        /* Firefox */
        -o-transition: -o-transform 0.2s ease-in;
        /* Opera */
        transition: transform 0.2s ease-in;
    }
    .layui-inline .layui-form-label {
        width: auto;
    }
    .img-box {
        position: relative;
        overflow: hidden;
    }
    .img-box:after {
        position:absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width:100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        content: attr(data-text);
        color: #FFF;
        text-align: center;
        padding: 32% 0;
        border-radius: 100%;
        font-style: normal;
        pointer-events: none;
        transition: opacity 0.6s;
        -moz-transition:opacity 0.6s; /* Firefox 4 */
        -webkit-transition:opacity 0.6s; /* Safari and Chrome */
        -o-transition:opacity 0.6s; /* Opera */
    }
    .img-box:hover:after {
        opacity: 1;
    }
    .img-box-before:after {
        /*line-height: 39px;*/
        padding: 12% 0;
    }
    .layui-inline-block {
        display: inline-block !important;
    }
    .result_account {
        text-indent: 2em;
    }
    /* 取消reboot.scss对legend标签的影响 */
    fieldset legend {
        width: auto;
    }

    div.picture_div {
        margin-bottom: 5px;
        margin-right: 5px;
        position: relative;
        display: inline-block;
    }

    .picture_describe {
        color: white;
        cursor: pointer;
        position: absolute;
        top: 80%;
        left: 0;
        text-align: center;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        line-height: 24px;
        height: 20%;        font-style: normal;
    }

    .picture_div:hover > .picture_close {
        display: inline-block;
    }

    .picture_close {
        display: none;
        position: absolute;
        right: 0;
        font-size: 22px;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.2);
    }
    /*------公共样式结束------*/
    /*小屏幕设备*/
    @media (max-width: 767px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

    /*中大型屏幕设备*/
    @media (min-width: 768px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

</style>
<main style="min-height: ${maxHeight}px">
    <div style="max-width: ${maxWidth}px;margin: 0 auto">

        <#-- 中部展示形式选择栏开始 -->
        <div class="accordion" id="accordion">
            <div class="card-body">
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="customRadioInline1" name="customRadioInline1"
                           class="custom-control-input" checked>
                    <label class="custom-control-label" for="customRadioInline1">图文形式</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="customRadioInline2" name="customRadioInline1"
                           class="custom-control-input">
                    <label class="custom-control-label" for="customRadioInline2">仅文字</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="customRadioInline3" name="customRadioInline1"
                           class="custom-control-input">
                    <label class="custom-control-label" for="customRadioInline3">仅图片</label>
                </div>
            </div>
        </div>
        <#-- 中部展示形式选择栏结束 -->

        <#-- 中部条件查询栏开始 -->
        <div style="padding-top: 10px">
            <div class="layui-form" lay-filter="search-result">
                <div class="layui-form-item" style="margin-bottom: 0">
                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline">
                            <input type="text" name="time" placeholder="选择时间范围" id="time" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">类型范围</label>
                        <div class="layui-input-inline">
                            <select name="type" id="type_view"></select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">审核状态</label>
                        <div class="layui-input-inline">
                            <select name="resultStatus">
                                <option value="">全部</option>
                                <option value="UNAUDITED">未审核</option>
                                <option value="PASSED">已通过</option>
                                <option value="NOTPASS">未通过</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="padding-left: 14px">
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search_result">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </div>
        <#-- 中部条件查询栏结束 -->
        <hr>
        <#-- 时间线开始 -->
        <div style="max-width: 890px;margin-left: 15px;margin-right: 15px;">
            <ul class="layui-timeline">
                <div id="timeline_view"></div>
            </ul>
            <div id="page"></div>
        </div>
        <#-- 时间线结束 -->
    </div>

</main>
<script>
    let flag = 0
</script>
<script type="text/html" id="type">
    <option value="">全部</option>
    {{# layui.each(d.payload, function(index, item) { }}
    <option value="{{item.id}}">{{ item.name }}</option>
    {{# }) }}
</script>
<script type="text/html" id="timeline">
    {{# layui.each(d.payload.records, function(index, item) { }}
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-row">
                <input type="hidden" name="id" value="{{ item.id }}">
                <div class="layui-timeline-title layui-col-xs8">{{ item.name }}</div>
                <div class="layui-col-xs4" style="text-align: right">
                    <div class="layui-btn-group">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name="edit">
                            <i class="layui-icon">&#xe642;</i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name="delete">
                            <i class="layui-icon">&#xe640;</i>
                        </button>
                    </div>
                </div>
            </div>
            <div>
                <span>类型:
                {{# if (item.type != null) { }}
                    {{ item.type.name }}
                {{# } else { }}
                    暂无
                {{# } }}
                </span>
            </div>
            <div>
                <span>审核状态:
                {{# if (item.resultStatus === 'PASSED') { }}
                    <span class="layui-badge layui-bg-green">已通过</span>
                {{# } else  if (item.resultStatus === 'UNAUDITED') { }}
                    <span class="layui-badge layui-bg-gray">未审核</span>
                {{# } else if (item.resultStatus === 'NOTPASS') { }}
                    <span class="layui-badge">未通过</span>
                {{# } }}
                </span>
            </div>
            {{# if (flag == 0 || flag == 1) { }}
            <div name="only-text">
                <div>
                    <span>参加人员:
                        {{# layui.each(item.userList, function(index, user) { }}
                            {{ user.username }}
                        {{# }) }}
                    </span>
                </div>
                {{# if (item.link != null) { }}
                <div>
                    <span>成果链接: </span>
                    <a href="{{ item.link }}">{{ item.link }}</a>
                </div>
                {{# } }}
                {{# if (item.getTime != null) { }}
                <div>
                    <span>获得时间: {{ item.getTime }}</span>
                </div>
                {{# } }}
                <div>
                    <span>成果简介: </span>
                    <div class="result_account">
                        {{ item.info }}
                    </div>
                </div>
            </div>
            {{# } else { }}
            <div name="only-text" style="display: none">
                <div>
                    <span>参加人员:
                        {{# layui.each(item.userList, function(index, user) { }}
                            {{ user.username }}
                        {{# }) }}
                    </span>
                </div>
                {{# if (item.link != null) { }}
                <div>
                    <span>成果链接: </span>
                    <a href="{{ item.link }}">{{ item.link }}</a>
                </div>
                {{# } }}
                {{# if (item.getTime != null) { }}
                <div>
                    <span>获得时间: {{ item.getTime }}</span>
                </div>
                {{# } }}
                <div>
                    <span>成果简介: </span>
                    <div class="result_account">
                        {{ item.info }}
                    </div>
                </div>
            </div>
            {{# } }}

            {{# if (flag == 0 || flag == 2) { }}
            <div name="only-image">
            {{# if (item.resultPictureList.length > 0) { }}
            <div id="carouselExampleCaptions{{ index }}" class="carousel slide" data-ride="carousel">
                {{# if (item.resultPictureList.length > 1) { }}
                <ol class="carousel-indicators">
                    {{# layui.each(item.resultPictureList, function(pic_index, pic) { }}
                    {{# if(pic_index == 0) { }}
                    <li data-target="#carouselExampleCaptions{{ index }}" data-slide-to="{{ pic_index }}" class="active"></li>
                    {{# } else { }}
                    <li data-target="#carouselExampleCaptions{{ index }}" data-slide-to="{{ pic_index }}"></li>
                    {{# } }}
                    {{# }) }}
                </ol>
                {{# } }}
                <div class="carousel-inner">
                    {{# layui.each(item.resultPictureList, function(pic_index, pic) { }}
                    {{# if(pic_index == 0) { }}
                    <div class="carousel-item active">
                        <img src="{{ pic.path }}" class="d-block w-100" alt="{{ pic.path }}">
                        <div class="carousel-caption d-none d-md-block">
                            <p class="text-truncate">{{ pic.info }}</p>
                        </div>
                    </div>
                    {{# } else { }}
                    <div class="carousel-item">
                        <img src="{{ pic.path }}" class="d-block w-100" alt="{{ pic.path }}">
                        <div class="carousel-caption d-none d-md-block">
                            <p class="text-truncate">{{ pic.info }}</p>
                        </div>
                    </div>
                    {{# } }}
                    {{# }) }}
                </div>
                {{# if (item.resultPictureList.length > 1) { }}
                <a class="carousel-control-prev" href="#carouselExampleCaptions{{ index }}" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleCaptions{{ index }}" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                {{# } }}
            </div>
            {{# } else { }}
            <div name="only-image" style="display: none">
                {{# if (item.resultPictureList.length > 0) { }}
                <div id="carouselExampleCaptions{{ index }}" class="carousel slide" data-ride="carousel">
                    {{# if (item.resultPictureList.length > 1) { }}
                    <ol class="carousel-indicators">
                        {{# layui.each(item.resultPictureList, function(pic_index, pic) { }}
                        {{# if(pic_index == 0) { }}
                        <li data-target="#carouselExampleCaptions{{ index }}" data-slide-to="{{ pic_index }}" class="active"></li>
                        {{# } else { }}
                        <li data-target="#carouselExampleCaptions{{ index }}" data-slide-to="{{ pic_index }}"></li>
                        {{# } }}
                        {{# }) }}
                    </ol>
                    {{# } }}
                    <div class="carousel-inner">
                        {{# layui.each(item.resultPictureList, function(pic_index, pic) { }}
                        {{# if(pic_index == 0) { }}
                        <div class="carousel-item active">
                            <img src="{{ pic.path }}" class="d-block w-100" alt="{{ pic.path }}">
                            <div class="carousel-caption d-none d-md-block">
                                <p class="text-truncate">{{ pic.info }}</p>
                            </div>
                        </div>
                        {{# } else { }}
                        <div class="carousel-item">
                            <img src="{{ pic.path }}" class="d-block w-100" alt="{{ pic.path }}">
                            <div class="carousel-caption d-none d-md-block">
                                <p class="text-truncate">{{ pic.info }}</p>
                            </div>
                        </div>
                        {{# } }}
                        {{# }) }}
                    </div>
                    {{# if (item.resultPictureList.length > 1) { }}
                    <a class="carousel-control-prev" href="#carouselExampleCaptions{{ index }}" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleCaptions{{ index }}" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                    {{# } }}
                </div>
                {{# } }}
            </div>
            {{# } }}
            </div>
            {{# } }}
        </div>
    </li>
    {{# }) }}
    {{# if (d.payload.total == 0) { }}
    <li class="layui-timeline-item">
        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">这里的精彩尚未到来</div>
        </div>
    </li>
    {{# } }}
</script>
<#-- 添加人员弹窗开始 -->
<script type="text/html" id="addUserForm">
    <form class="layui-form" action="" style="background-color: white;padding-top: 10px">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">请选择</label>
            <div class="layui-input-block">
                {{# layui.each(d.payload, function(index, item) { }}
                <i class="layui-inline layui-inline-block" onmouseover="this.style.cursor='pointer'" style="position: relative">
                    <input type="hidden" name="userId" value="{{ item.id }}" />
                    <div class="img-box" data-text="{{ item.username }}">
                        {{# if (item.avatarPath != null) { }}
                        <img class="layui-circle layui-anim" src="{{ item.avatarPath }}"
                             alt="logo" width="50" onclick="chooseThis(this)">
                        {{# } else { }}
                        <img class="layui-circle layui-anim" src="/images/logo.png"
                             alt="logo" width="50" onclick="chooseThis(this)">
                        {{# } }}
                    </div>
                </i>
                {{# }) }}
            </div>
        </div>
    </form>
</script>
<#-- 添加人员弹窗结束 -->

<#-- 添加成果开始 -->
<script type="text/html" id="addResult">
    <form class="layui-form" action="#" lay-filter="addResultForm" id="addResultForm" style="padding-top: 10px">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">成果名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required"
                       lay-reqtext="成果名称不能为空！"
                       autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">获得时间</label>
            <div class="layui-input-block">
                <input type="text" name="getTime" class="layui-input" id="getTime">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto"> 成果类型</label>
            <div class="layui-input-block">
                <select name="typeId" lay-verify="required">
                    <option value="0">全部</option>
                    {{# layui.each(d.payload, function(index, item) { }}
                    <option value="{{item.id}}">{{ item.name }}</option>
                    {{# }) }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;line-height: 35px">合作人员</label>
            <div class="layui-input-block" style="line-height: 39px;max-height: 300px;overflow: auto" id="seach">
                <button type="button" class="layui-btn addPerson">
                    <i class="layui-icon">&#xe608;</i> 添加
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">成果简介</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入成果简介" name="info" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">成果图片</label>
            <div class="layui-input-block" id="resultPictures">
                <div class="layui-upload-drag" id="addResultPicture">
                    <i class="layui-icon layui-icon-picture-fine"></i>
                    <p>点击进行图片上传剪切</p>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="padding-left: 2%;">
            <div id="layer-photos-demo">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="result-add-submit" id="resultAddSubmit" value="确认">
        </div>
    </form>
</script>
<#-- 添加成果弹窗结束 -->
<script>
    $(function () {

        $('#customRadioInline1').click(function () {
            flag = 0;
            $('div[name="only-image"]').show()
            $('div[name="only-text"]').show()
        });
        $('#customRadioInline2').click(function () {
            flag = 1;
            $('div[name="only-text"]').show()
            $('div[name="only-image"]').hide()
        });
        $('#customRadioInline3').click(function () {
            flag = 2;
            $('div[name="only-image"]').show()
            $('div[name="only-text"]').hide()
        });


        layui.use(['laydate', 'layer', 'laytpl', 'form', 'laypage'], function () {
            const laydate = layui.laydate
                , layer = layui.layer
                , laytpl = layui.laytpl
                , form = layui.form
                , laypage = layui.laypage;

            $(document).on('click', 'button[type="reset"]', function() {
                form.val("search-result", {
                    "time": "",
                    "type": "",
                    "resultStatus": ""
                });
                searchResult()
                form.render();
            })

            $(document).on('click', 'button[name="edit"]', function() {
                let id = $(this).parent().parent().parent().find("input[name='id']").val();

                $.get('/type/get', function(data) {
                    const getTpl = addResult.innerHTML
                    laytpl(getTpl).render(data, function(html){
                        $.get('/result/get/' + id, function (data) {
                            layer.open({
                                type: 1,
                                title: '修改成果',
                                area: ['90%', '90%'],
                                content: html,
                                btn: ['确定', '取消'],
                                success: function(index, layero) {
                                    form.render();
                                    form.val("addResultForm", {
                                        "name": data.payload.name,
                                        "typeId": data.payload.typeId,
                                        "info": data.payload.info
                                    });
                                    laydate.render({
                                        elem: '#getTime'
                                        , type: 'date'
                                        , value: data.payload.getTime
                                        , max: 0
                                    })

                                    let html =
                                        laytpl('{{# layui.each(d, function(index, item) { }}' +
                                            '<i class=\"layui-inline layui-inline-block\" onmouseover=\"this.style.cursor=\'pointer\'\" ' +
                                            'style=\"position: relative; cursor: pointer;\"> <input type=\"hidden\" name=\"userId\" value=\"{{ item.id }}\">' +
                                            '<div class=\"img-box img-box-before\" data-text=\"{{ item.username }}\">  ' +
                                            '{{# if (item.avatarPath != null) {  }}' +
                                            '<img class=\"layui-circle layui-anim layui-anim-scale\" src=\"{{ item.avatarPath }}\" alt=\"logo\"' +
                                            '{{# } else { }}' +
                                            '<img class=\"layui-circle layui-anim layui-anim-scale\" src=\"/images/logo.png\" alt=\"logo\"' +
                                            '{{# } }}' +
                                            ' width=\"50\" onclick=\"chooseThis(this)\"' +
                                            'style=\"border-color: red; border-style: outset; border-width: 2px;\">  </div> </i>' +
                                            '{{# }) }}').render(data.payload.userList);
                                    $('#seach').prepend(html)

                                    html = laytpl('{{# layui.each(d, function(index, item) { }}' +
                                        '<div class="picture_div">\n' +
                                        '    <input type=\'hidden\' name=\'id\' value=\'{{ item.id }}\'>\n' +
                                        '    <img width="202" src="{{ item.path }}" alt="图片名"> \n' +
                                        '    <i class="picture_describe layui-elip">{{ item.info }}</i> \n' +
                                        '    <i class="layui-icon layui-icon-close picture_close"></i>\n' +
                                        '</div>' +
                                        '{{# }) }}').render(data.payload.resultPictureList)
                                    $('#layer-photos-demo').prepend(html);
                                },
                                yes: function(index, layero){
                                    let resultAddSubmit = $('#resultAddSubmit');
                                    form.on('submit(result-add-submit)', function(data){
                                        layer.load()
                                        let message = new FormData();
                                        let addMessage = (collection, name) => {
                                            $.each(collection, function (i, value) {
                                                message.append(name, value);
                                            })
                                        }
                                        let addDataField = (names) => {
                                            $.each(names, (i, value) => {
                                                message.append(value, data.field[value])
                                            })
                                        }
                                        let userIds = $("#addResultForm input[name='userId']").map(function () {
                                            return $(this).val();
                                        }).get();
                                        let test = $(".picture_div img").filter(function () {
                                            return $(this).parent().find('input[name="id"]').length == 0
                                        }).map(function () {
                                            let file = dataURLToFile($(this)[0].src, new Date().getTime());
                                            return file
                                        }).get()
                                        let imgInfos = $(".picture_describe").map(function () {
                                            return $(this).html();
                                        }).get();
                                        if (userIds !== []) {
                                            addMessage(userIds, "userIds")
                                        }
                                        if (test !== []) {
                                            addMessage(test, "imgs")
                                        }
                                        if (imgInfos !== []) {
                                            addMessage(imgInfos, "imgInfos")
                                        }
                                        message.append("id", id)
                                        addDataField(["name", "typeId", "info", "getTime"])

                                        $.ajax({
                                            url: '/result/update',
                                            type: 'post',
                                            contentType: false,
                                            processData: false,
                                            dataType: "json",
                                            data: message,
                                            success: function (data) {
                                                layer.closeAll()
                                                if (data.success) {
                                                    layer.msg("更新成功！");
                                                    location.reload()
                                                } else {
                                                    layer.msg(data.msg)
                                                }
                                            },
                                            error: function (data) {
                                                layer.close(layer.index)
                                                layer.msg("更新失败！请重试！");
                                            }
                                        })
                                        return false; //阻止表单跳转
                                    });
                                    resultAddSubmit.trigger('click')
                                },
                                btn2: function(index, layero) {
                                }
                            })
                        })
                    });
                });
                form.render('select');
            })
            $(document).on('click', 'button[name="delete"]', function() {
                layer.load()
                let id = $(this).parent().parent().parent().find("input[name='id']").val();
                $.post('/result/delete/' + id, function (data) {
                    layer.closeAll()
                    layer.msg(data.payload)
                    location.reload()
                })
            })

            $.get('/type/get', function(data) {
                const getTpl = type.innerHTML
                    , view = document.getElementById('type_view');
                laytpl(getTpl).render(data, function(html){
                    view.innerHTML = html;
                });
                form.render('select');
            })

            function searchResult(data, page, size) {
                let formData = new FormData()
                if (data !== undefined) {
                    formData.append('time', data.field['time'])
                    formData.append('type', data.field['type'])
                    formData.append('resultStatus', data.field['resultStatus'])
                }
                if (page !== undefined) {
                    formData.append("page", page);
                }
                if (size !== undefined) {
                    formData.append("size", size);
                }

                $.ajax({
                    url: '/result/search/me',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (result) {
                        renderData(result)
                        if (result.payload.total > 0) {
                            laypage.render({
                                elem: 'page'
                                , count: result.payload.total
                                , curr: result.payload.current
                                , limit: 10
                                ,jump: function(obj, first){
                                    //首次不执行
                                    if(!first) {
                                        searchResult(data, obj.curr, obj.limit)
                                    }
                                }
                            });
                        }
                    },
                    error: function (data) {
                        console.log("error")
                    }
                })
            }

            form.on('submit(search_result)', function(data){
                searchResult(data)
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            $.post('/result/search/me', function (data) {
                renderData(data)
                if (data.payload.total > 0) {
                    laypage.render({
                        elem: 'page'
                        , count: data.payload.total
                        , curr: data.payload.current
                        , limit: 10
                        ,jump: function(obj, first){
                            //首次不执行
                            if(!first){
                                $.post('/result/search/me', {'page': obj.curr, 'size': obj.size}, function (data) {
                                    renderData(data)
                                })
                            }
                        }
                    });
                }
            })

            function renderData(data) {
                const getTpl = timeline.innerHTML
                    , view = document.getElementById('timeline_view');
                laytpl(getTpl).render(data, function(html){
                    view.innerHTML = html;
                });
            }

            laydate.render({
                elem: '#start_time',
                type: 'date',
                max: 0
            });

            laydate.render({
                elem: '#end_time',
                type: 'date',
                max: 0,
                done: function (value, date) {
                    if ($('#start_time').val() > value) {
                        layer.msg('时间选择错误', {time: 1000})
                        $('#end_time').focus()
                    }
                }
            });

            //将base64转换为blob
            function dataURLToFile(dataUrl, fileName) {
                let arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], fileName, {type: mime});
            }
        })
    })
</script>
<script>
    function chooseThis(that) {
        if (that.style.borderColor === "") {
            that.style.borderColor = "red";
            that.style.borderStyle = "outset";
            that.style.borderWidth = "2px";
            that.classList.add("layui-anim-scale");
            that.classList.remove("layui-anim-scaleSpring");
        } else {
            that.style.borderColor = "";
            that.style.borderStyle = "";
            that.style.borderWidth = "";
            that.classList.add("layui-anim-scaleSpring");
            that.classList.remove("layui-anim-scale");
        }
    }

    $('.result_account').un_displayPart();
    $('.result_account').click(function () {
        $(this).attr("displayLength", "300")
        $(this).un_displayPart();
    })


    layui.use(['laydate', 'form', 'layer', 'laytpl'], function () {
        const laydate = layui.laydate
            , form = layui.form
            , layer = layui.layer
            , laytpl = layui.laytpl
            , $ = layui.$;


        // 添人员
        $(document).on('click', '.addPerson', function () {
            const that = this;
            let idInputs = $('.layui-anim-scale').parent().prev().toArray();
            const ids = idInputs.map(t => t.value)
            $.get('/user/others?userIds=' + ids.join(), function(data) {
                const getTpl = addUserForm.innerHTML;
                laytpl(getTpl).render(data, function(html){
                    layer.open({
                        type: 1,
                        title: '添加人员',
                        area: '90%',
                        content: html,
                        btn: ['确定', '取消'],
                        yes: function(index, layero){
                            let imgBox = $('.layui-anim-scale').parent();
                            imgBox.addClass("img-box-before")
                            $(that).parent().prepend(imgBox.parent())
                            layer.close(index)
                        },
                        btn2: function(index, layero) {

                        }
                    })
                })
            })
        });

        /* 点击已经选择的人员取消选择 */
        $(document).on('click', '.img-box-before', function() {
            $(this).parent().remove()
            form.render();
        });

        $(document).on('mouseover', '.picture_describe', function () {
            const that = this;
            layer.tips(that.innerHTML, that, {
                time: 1500
            });
        })

        // 点击修改成果描述
        $(document).on('click', '.picture_describe', function () {
            const that = this;
            let id = $(this).parent().find('input[name="id"]').val();
            layer.prompt({
                value: this.innerHTML,
                title: '请输入成果简介',
            }, function(value, index, elem){
                if (id !== undefined) {
                    $.post('/resultPicture/upload/info', {"id": id, "info": value}, function (data) {
                        if (data.success) {
                            that.innerHTML = value
                        } else {
                            layer.msg('修改失败！');
                        }
                    })
                } else {
                    that.innerHTML = value
                }
                layer.close(index);
            })
        })

        // 删除点击的成果
        $(document).on('click', '.picture_close', function () {
            const that = this;
            let id = $(this).parent().find('input[name="id"]').val();
            if (id !== undefined) {
                $.post('/resultPicture/delete/' + id, function (data) {
                    if (data.success) {
                        $(that).parent().remove()
                    } else {
                        layer.msg(data.payload)
                    }
                })
            }
        })

        // 成果图片裁剪弹窗
        $(document).on('click', '#addResultPicture', function () {
            layer.open({
                type: 2,
                title: '裁切成果图片',
                content: '/test',
                area: ['90%', '90%'],
                success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                    var w = $(layero).find("iframe")[0].contentWindow;
                    w.myCropper({aspectRatio: 16 / 9}, undefined, $('#layer-photos-demo'), 1)
                    let find = body.find("#check");
                    $(find).on('click', function () {
                        layer.close(layer.index)
                        layer.msg('开始上传...')
                    })
                }
            })
        })

        form.render();
        laydate.render({
            elem: '#time'
            , range: true //或 range: '~' 来自定义分割字符
            , max: 0
        })
    })
</script>
<#include '../footer.ftl'>